<script setup>


import {useOrderInfoStore} from "@/stores/index.js";
import {userDefaultAddr, userDeleteAddrById, userGetAddrByUserId, userUpdateAddrById} from "@/api/user.js";
import {ref, watch} from "vue";
import {ElMessage} from "element-plus";
import AddNewAddr from "@/views/Order/components/AddNewAddr.vue";

// 获取地址列表
const orderInfo = useOrderInfoStore()
const addrList = ref()
const getAddressList = async () => {
  const res = await userGetAddrByUserId(orderInfo.orderInfo.userId)
  addrList.value = res.data
}
// 转为编辑
const editIndex = ref(null)
const edit = (id) => {
  editIndex.value = id
}
// 进行提交
const subEdit = async (id, name, address, phone) => {
  await userUpdateAddrById(id, name, address, phone)
  ElMessage.success('修改成功')
  editIndex.value = null
}
// 取消编辑
const cancel = (id) => {
  console.log('取消')
  console.log(id)
  editIndex.value = null
}
// 删除地址
const deleteAddrById = async (id) => {
  await userDeleteAddrById(id)
  await getAddressList()
  ElMessage.success('删除成功')
}
const isAddAddr = ref(false)
const addAddress = () => {
  isAddAddr.value = true
}
watch(isAddAddr, () => {
  getAddressList()
})
const defaultAddr = async (id) => {
  await userDefaultAddr(id, orderInfo.goodsInfo.id)
  getAddressList()
  ElMessage.success('设置成功')
}
getAddressList()
</script>

<template>
  <div class="newAddr">
    <el-button
        @click="addAddress"
    color="deepskyblue"
    :dark="isDark"
    plain
    >
      新增地址
    </el-button>
  </div>
  <div class="fanorfollow_box" v-if="addrList">
    <div class="fanorfollow" v-for="item in addrList" :key="item.id">
      <div class="fanorfollow_info">
        <div class="fanorfollow_info_top">
          <span
              style="color: #666; max-width: 180px"
          >收货人</span
          >
        </div>
        <div class="fanorfollow_info_bottom">
          <el-input
              v-if="editIndex === item.id"
              v-model="item.name" />
          <span v-else>{{ item.name }}</span>
        </div>
      </div>
      <div class="fanorfollow_info">
        <div class="fanorfollow_info_top">
          <span
              style="color: #666; max-width: 180px">
            电话</span>
        </div>
        <div class="fanorfollow_info_bottom">
          <el-input
              v-if="editIndex === item.id"
              v-model="item.phone" />
          <span v-else>{{ item.phone }}</span>
        </div>
      </div>
      <div class="fanorfollow_info">
        <div class="fanorfollow_info_top">
          <span
              style="color: #666; max-width: 180px"
          >地址</span
          >
        </div>
        <div class="fanorfollow_info_bottom">
          <el-input
              v-if="editIndex === item.id"
              v-model="item.address" />
          <span v-else>{{ item.address }}</span>
        </div>
      </div>
      <div class="fanorfollow_botton">
        <el-button
            :class="editIndex === item.id ? 'editBtn1' : ''"
            @click="editIndex === item.id ? subEdit(item.id, item.name, item.address, item.phone) : edit(item.id)"
            type="primary"
        >{{ editIndex === item.id ? '确认' : '编辑' }}</el-button>
        <el-button
            :class="editIndex === item.id ? 'editBtn2' : ''"
            @click="editIndex === item.id ? cancel(item.id) : deleteAddrById(item.id)"
            type="primary"
        >{{ editIndex === item.id ? '取消' : '删除' }}</el-button>
        <el-button
            @click="defaultAddr(item.id)"
            v-if="editIndex !== item.id"
            :disabled="item.status"
            type="primary"
        >{{ item.status === 1 ? '默认地址' : '设为默认' }}</el-button>
      </div>
    </div>

    <div>
      <el-empty
          v-if="0"
          :image-size="250"
          description="这里什么都没有哟"
      ></el-empty>
    </div>
  </div>
  <AddNewAddr v-model="isAddAddr" />
</template>

<style scoped>
.newAddr {
  margin: 12px 0;
}
.editBtn1 {
  position: relative;
  left: 30px;
  margin-bottom: 10px;
}
.editBtn2 {
  position: relative;
  left: 18px;
}
.fanorfollow_box :hover {
  border-width: 1px;
  border-color: deepskyblue;
}
.fanorfollow {
  padding: 0px 15px 0px 15px;
  height: 90px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  border: 1px solid #ebebeb;
}
.fanorfollow :hover {
  border-width: 1px;
  border-color: deepskyblue;
}

.fanorfollow_info {
  display: inline-block;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  overflow: hidden;
}
.fanorfollow_info_top {
  display: inline-block;
  font-size: 10;
  line-height: 14px;
  vertical-align: top;
  cursor: pointer;
}
.fanorfollow_info_top :hover {
  color: deepskyblue;
}
.fanorfollow_info_bottom {
  line-height: 14px;
  color: #999;
  margin-top: 5px;
  cursor: pointer;
}
</style>
